<template>
	<view class="content">
		<uni-nav-bar 
			left-icon="left" 
			right-icon="notification"  
			background-color="#efefef" 
			shadow=false
			border=false
			color="black"
			@clickLeft="returnHome()"
			@clickRight="inform()"
		/>
		<view class="title">
			<text class="titleItem">树洞</text>
		</view>
		<view class="funList">
			<button class="roamWander" @click="roamWander()" >
				<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/cycle.png" class="roamWanderImg"></image>
				开始漫游
			</button>
			 <view class="button-row">
				 <button class="news" @click="news()">最新</button>
				 <button class="favorite" @click="favorite()">最多喜欢</button>
			 </view>
			 <button class="myFavorite" @click="myFavorite()">
				<uni-icons type="heart" size="25" class="uniIconsImage"></uni-icons> 
				我的喜欢</button>
			 <button class="myDeliver" @click="myDeliver()">
				<uni-icons type="chatboxes" size="25" class="uniIconsImage"></uni-icons>  
				我的投稿</button>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			roamWander(){
				uni.navigateTo({
					url:"/pages/treeHold/treeHoldDetail"
				})
			},
			news(){
				console.log("最新")
				uni.navigateTo({
					url:"/pages/treeHold/treeHoldList?id=1"
				})
			},
			favorite(){
				console.log("最多收藏")
				uni.navigateTo({
					url:"/pages/treeHold/treeHoldList?id=2"
				})
			},
			myFavorite(){
				console.log("我的喜欢")
				uni.navigateTo({
					url:"/pages/treeHold/treeHoldList?id=3"
				})
			},
			myDeliver(){
				console.log("我的投稿")
				uni.navigateTo({
					url:"/pages/treeHold/treeHoldList?id=4"
				})
			},
			returnHome(){
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},
			inform(){
				console.log("通知")
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-gary;
	}
	.content{
		.title{
			display: flex;  
			justify-content: center;  
			align-items: center;  
			width: 100%;
			height: 40vh;
			align-items: center;
			margin: auto;
			.titleItem{
				font-size: 8vh;
				color: $grayTwo;
				font-family: "仿宋";
			}
		}
		.funList{
			display: flex;
			flex-direction: column; // 修改为列布局
			align-items: center;  
			button{
				display: flex;    /* 使其成为flex容器 */
				margin-bottom: 20rpx;
				height: 6vh;
				text-align: center;
				justify-content: center; /* 水平居中 */
				align-items: center;     /* 垂直居中 */
				color: black;
				background-color: $littleGary;
			}
			button:active{
				opacity: 0.8;
			}
			.roamWander{
				width: 80%;
				background-color: $grayTwo;
				color: white;
				.roamWanderImg{
					height: 44%;
					width: 3vh;
					margin: 30rpx 20rpx 20rpx 20rpx;
				}
			}
			.button-row { // 新增的类，用于包裹“最新”和“最多收藏”按钮
				 display: flex; // 使用弹性布局
				 justify-content: space-around; // 平均分布按钮
				 width: 80%;
				 .news{
					 margin-right:2%;
				 }
				 .favorite{
					 margin-left: 2%;
				 }
				.news, .favorite {
				 // 对两个按钮应用样式
					width: 50%;
					
				}
			 }
			.uniIconsImage{
				margin: 30rpx 20rpx 20rpx 20rpx;
			}
			.myFavorite, .myDeliver { 
				// 对“我的喜欢”和“我的投稿”按钮应用样式，并添加下边距
				width: 80%;
			}
		}
	}
</style>
